<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title th:text="${language['config-title']}"></title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>

    <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
    <link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"/>

    <!-- Data Tables -->
    <link href="../static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"/>
    <link href="../static/css/animate.css" rel="stylesheet"/>
    <link href="../static/css/style.css?v=4.1.0" rel="stylesheet"/>
    <link href="../static/css/plugins/switchery/switchery.css" rel="stylesheet"/>
    <link href="../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 th:text="${language['config-title']}"></h5>
                </div>
                <div class="ibox-content">
                    <button class="btn btn-info" type="button"><i class="fa fa-paste"></i> <span th:text="${language['operation-add']}"></span></button>
                    <br/>
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>Key</th>
                            <th>Status</th>
                            <th>Application</th>
                            <th>Config</th>
                            <th>Update At</th>
                            <th>Value</th>
                            <th>Operation</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:if="${#lists.isEmpty(configs)}">
                            <td colspan="3" style="color: gray" th:text="${language['no-record']}"></td>
                        </tr>
                        <tr class="gradeX" th:each="config : ${configs}">
                            <td th:text="${config.dataConfig.key}"></td>
                            <td th:text="${config.dataConfig.status}"></td>
                            <td th:text="${config.metaConfig.application}"></td>
                            <td th:text="${config.metaConfig.config}"></td>
                            <td th:text="${config.dataConfig.updateAt}"></td>
                            <td th:text="${config.dataConfig.value}"></td>
                            <td>
                                <a href="#">
                                    <button class="btn btn-success btn-xs" type="button"
                                            style="background-color: #1AB394">
                                        <i class="fa fa-paste"></i>
                                        <span th:text="${language['operation-edit']}"></span>
                                    </button>
                                </a>
                                <button class="btn btn-danger btn-xs delete" type="button"
                                        th:attr="id=${config.dataConfig.key}">
                                    <i class="fa fa-trash-o"></i>
                                    <span th:text="${language['operation-delete']}"></span>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../static/js/jquery.min.js?v=2.1.4"></script>
<script src="../static/js/bootstrap.min.js?v=3.3.6"></script>

<script src="../static/js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- Data Tables -->
<script src="../static/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="../static/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<script src="../static/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="../static/js/plugins/switchery/switchery.js"></script>
<script src="../static/js/plugins/cropper/cropper.min.js"></script>

<!-- Bootstrap table -->
<script src="../static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Sweet alert -->
<link href="../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"/>
<script src="../static/js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
    $(document).ready(function () {
        $('.delete').click(function () {
            var id = $(this).get(0).id;
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                $.ajax({
                    url: "config/" + id,
                    type: "delete",
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            swal("删除成功！", "您已经永久删除了这条数据！", "success");
                        } else {
                            swal("删除失败!", "删除失败了！", "error");
                        }
                    }
                });
            });
        });
    });
</script>
</body>
</html>